<template>
  <a-card :bordered="false">
    <div style="display: flex; padding: 14px 0">
      <div style="width: 140px; line-height: 32px; font-weight: bold; color: #000">{{ $t('会员签到') }}</div>
      <a-row :gutter="[0, 24]" style="width: calc(100% - 140px)">
        <a-col :span="24">
          <a-checkbox style="line-height: 32px" v-model="signinObj.states">{{ $t('启用') }}</a-checkbox>
          <span style="margin-left: 15px; color: orange">{{
            $t('（每15天为一个签到周期，需分别设置日常签到奖励和连续签到奖励）')
          }}</span>
        </a-col>
        <a-col :span="24" style="display: flex">
          <div style="line-height: 32px">{{ $t('日常签到奖励') }}：</div>
          <div>
            <a-select show-search :placeholder="$t('请选择优惠券')" style="width: 200px" :filter-option="false"
              @search="getCoupons" v-model="signinObj.couponId">
              <a-select-option :value="item.id" :key="index" v-for="(item, index) in coupons">
                <span>{{ item.name }}</span>
              </a-select-option>
            </a-select>
          </div>
        </a-col>
        <a-col :span="24" style="display: flex">
          <div style="line-height: 32px">{{ $t('连续签到奖励') }}：</div>
          <div>
            <div v-for="(sign, i) in signinList" :key="i" style="margin-bottom: 10px">
              <a-input v-model="sign.day" style="width: 200px" :disabled="sign.disabled"
                oninput="value=value.replace(/\D/g,''); if(parseInt(value) > 15)value = 15"></a-input>
              <span style="padding: 0 4px">{{ $t('天赠送') }}</span>
              <a-select show-search :placeholder="$t('请选择优惠券')" style="width: 200px" :filter-option="false"
                @search="getCoupons" v-model="sign.couponId" :disabled="sign.disabled">
                <a-select-option :value="item.id" :key="index" v-for="(item, index) in coupons">
                  <span>{{ item.name }}</span>
                </a-select-option>
              </a-select>
              <span>
                <a-icon v-if="sign.disabled" @click="editSignin(sign)" type="edit"
                  style="color: #1890ff; cursor: pointer; margin-left: 5px" />
                <a-icon v-else type="check" @click="saveSignin(sign, i)"
                  style="color: #1890ff; cursor: pointer; margin-left: 5px" />
              </span>
              <a-icon type="close" @click="delSignin(i)" style="color: #1890ff; cursor: pointer; margin-left: 5px" />
              <a-icon type="plus" v-if="i == signinList.length - 1" @click="addSignin"
                style="color: #1890ff; cursor: pointer; margin-left: 5px" />
            </div>
          </div>
        </a-col>
        <a-col :span="24">
          <a-button type="primary" @click="saveSigninRule" v-has="'BisSysParameterController:edit'">{{ $t('保存')
          }}</a-button>
        </a-col>
      </a-row>
    </div>
    <edit-business-modal ref="modalForm" @ok="modalFormOk"></edit-business-modal>
  </a-card>
</template>

<script>
import { getAction, httpAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { mixinDevice } from '@/utils/mixin'

export default {
  name: 'CheckInRules',
  components: {
  },
  mixins: [JeecgListMixin, mixinDevice],
  data() {
    return {
      description: '运营设置',
      editingKey: '',
      signinObj: {
        states: false,
      },
      signinList: [],
      coupons: [],
    }
  },
  created() {
    this.getSignins()
  },
  computed: {
  },
  methods: {
    modalFormOk() {
      this.loadData(1)
    },
    initDictConfig() { },
    edit(id) {
      let that = this
      const newData = [...that.dataSource]
      const target = newData.filter((item) => id === item.id)[0]
      that.editingKey = id
      if (target) {
        target.editable = true
        that.dataSource = newData
      }
    },
    editSignin(item) {
      this.$set(item, 'disabled', false)
    },
    saveSignin(item, ind) {
      let i = 0
      if (!item.day || !item.couponId) {
        this.$message.warning(this.$t('请设置连续签到规则'))
        return
      }
      this.signinList.forEach((col) => {
        if (col.day != item.day) {
          i++
        } else {
          i--
        }
      })
      if (i == this.signinList.length - 2) {
        this.$set(this.signinList[ind], 'disabled', true)
      } else {
        this.$message.warning(this.$t('已存在重复的签到规则'))
      }
    },
    addSignin() {
      let obj = {}
      obj.day = ''
      obj.couponId = ''
      obj.disabled = false
      this.signinList.push(obj)
    },
    delSignin(i) {
      this.signinList.splice(i, 1)
      if (this.signinList.length == 0) {
        let obj = {}
        obj.day = ''
        obj.couponId = ''
        obj.disabled = false
        this.signinList.push(obj)
      }
    },
    getCoupons(info) {
      let that = this,
        query = {}
      if (info) {
        query.goodsInfo = info
      }
      query.form = '9'
      query.state = 'Y'
      query.notSystem = 1
      query.column = 'sort'
      query.order = 'asc'
      getAction('/goods/bisGoodsInfor/list', query).then((res) => {
        that.coupons = res.result.records
      })
    },
    getSignins() {
      let that = this
      getAction('/sign/bisSign/list').then((res) => {
        if (res.success) {
          if (res.result.records.length > 0) {
            let dtl = res.result.records[0]
            dtl.states = dtl.state ? true : false
            that.signinObj = Object.assign({}, dtl)
            that.getCouponShow()
            that.getSignSeriesList()
          } else {
            that.getCoupons()
            that.$set(that.signinObj, 'states', false)
            that.signinList = [
              {
                couponId: '',
                day: '',
                disabled: false,
              },
            ]
          }
        }
      })
    },
    getSignSeriesList() {
      let that = this
      getAction('/sign/bisSign/queryBisSignSeriesByMainId', { id: that.signinObj.id }).then((res) => {
        if (res.success) {
          if (res.result.length > 0) {
            that.signinList = res.result.map((sn) => {
              let dtl1 = Object.assign({}, sn, { disabled: true })
              return dtl1
            })
          } else {
            that.signinList = [
              {
                couponId: '',
                day: '',
                disabled: false,
              },
            ]
          }
        }
      })
    },
    saveSigninRule() {
      let that = this,
        httpurl = '',
        method = '',
        querydata = {}
      if (that.signinObj.id) {
        httpurl = '/sign/bisSign/edit'
        method = 'put'
      } else {
        httpurl = '/sign/bisSign/add'
        method = 'post'
      }
      if (that.signinObj.states && !that.signinObj.couponId) {
        that.$message.error(that.$t('请设置日常签到奖励'))
        return
      }
      let arr = that.signinList.filter((sn) => {
        return sn.disabled
      })
      querydata = Object.assign({}, that.signinObj, {
        state: that.signinObj.states ? 1 : 0,
        bisSignSeriesList: arr,
      })
      httpAction(httpurl, querydata, method).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.getSignins()
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    getCouponShow() {
      let that = this,
        query = {}
      query.form = '9'
      query.notSystem = 1
      query.column = 'sort'
      query.order = 'asc'
      query.pageSize = 100
      getAction('/goods/bisGoodsInfor/list', query).then((res) => {
        that.coupons = res.result.records
      })
    },
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
<style>
.table-padlr0 .ant-table.ant-table-small>.ant-table-content>.ant-table-body {
  margin: 0;
}

.table-padlr0 .ant-table-small>.ant-table-content>.ant-table-body>table>.ant-table-thead>tr>th {
  background-color: #fafafa;
}
</style>